<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";

const props = defineProps(["model", "meta"]);

const { model, meta } = props;
let id = 1000;

function append(data) {
  const newChild = { id: id++, title: 'testtest', children: [] }
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
  dataSource.value = [...dataSource.value]
}

function remove(node, data) {
  const parent = node.parent
  const children = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)
  dataSource.value = [...dataSource.value]
}

</script>
<template>
  <el-tree :data="model" :default-expand-all="true" :show-checkbox="true" :expand-on-click-node="false">
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ data.title }}</span>
        <span>
          <a @click="append(data)"> Append </a>
          <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
        </span>
      </span>
    </template>
  </el-tree>
</template>